<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%><%!private Object basePath;%>">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>“墨趣”网上书城</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <%--<script src="js/prototype.js" type="text/javascript"></script>--%>
    <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
    <%--<script src="js/lightbox.js" type="text/javascript"></script>--%>
    <script type="text/javascript" src="js/java.js"></script>
    <style>
        .shoppingBtn{
            display: inline-block;
            height: 22px;
            text-align: center;
            line-height: 20px;
            font-size: 16px;
            font-weight: 600;
            position: relative;
            top: 2px;
            margin:10px;
        }
        #shoppingNum{
            display: inline-block;
            width: 50px;
            height: 22px;
            font-size: 15px;
            color: #333;
            text-align: center;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button{
            -webkit-appearance: none !important;
        }
        #dis{
            margin-left:50px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="header">
        <div class="logo"><a href="index.jsp"><img src="images/logo.gif" alt="" title="" border="0" /></a></div>
        <div id="menu">
            <ul>
                <li><a href="index.jsp">首页</a></li>
                <li><a href="about.jsp">关于我们</a></li>
                <li><a href="category.jsp">所有图书</a></li>
                <li><a href="specials.jsp">特别推荐</a></li>
                <li class="selected"><a href="details.jsp">图书详情</a></li>
                <li><a href="/orders/getlistByuid.action">我的订单</a></li>
                <c:if test="${empty loger}">
                    <li><a href="myaccount.jsp">登录</a></li>
                    <li><a href="register.jsp">注册</a></li>
                </c:if>
                <c:if test="${not empty loger}">
                    <li><a href="/user/doexit.action">退出</a></li>
                </c:if>
            </ul>
        </div>
    </div>
    <div class="center_content">
        <div class="left_content">
            <div class="crumb_nav">
                <a href="index.jsp">首页</a> &gt;&gt; ${books.bname}
            </div>
            <input type="hidden" value="${books.id}">
            <div class="title"><span class="title_icon"><img src="images/bullet1.gif" alt="" title="" /></span>${books.bname}</div>
            <div class="feat_prod_box_details">
                <div class="prod_img"><a href="details.jsp"><img src="imgs/bookimg1.jpg" alt="" title="" border="0" style="width:120px;"/></a>
                    <br /><br />
                    <a href="images/big_pic.jpg" rel="lightbox"><img src="images/zoom.gif" alt="" title="" border="0" /></a>
                </div>
                <div class="prod_det_box">
                    <div class="box_top"></div>
                    <div class="box_center">
                        <div class="prod_title">${books.bname}</div>
                        <p class="details">
                            <strong>作者：</strong> ${books.writer}
                        </p>
                        <p class="details">
                            <strong>出版社：</strong> ${books.publisher}
                        </p>
                        <p class="details">
                            <strong>库存量：</strong> ${books.inventory}
                        </p>

                        <div class="price"><strong>价格:</strong> <span class="red">￥${books.price}</span></div>
                        <div class="price">
                            <strong>数量:</strong>
                            <button class="shoppingBtn" onclick="reduceShopping()">-</button>
                            <input type="number" value="1" id="shoppingNum">
                            <button class="shoppingBtn" onclick="addShopping()">+</button>
                        </div>
                        <button class="shoppingBtn" onclick="goShopping(${books.id},${books.price})">加入购物车</button>
                        <button class="shoppingBtn" onclick="buyNow(${books.id})">立即购买</button>
                        <div class="clear"></div>
                    </div>
                    <div class="box_bottom"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div id="demo" class="demolayout">

                <ul id="demo-nav" class="demolayout">
                    <li><a class="active" href="#tab1">更多详情</a></li>
                    <li onclick="pinglun()"><a class="" href="#tab2">评论</a></li>
                </ul>

                <div class="tabs-container">

                    <div style="display: none;" class="tab" id="tab1">
                        <p class="more_details">
                            ${books.description}
                        </p>
                    </div>

                    <div style="display: none;" class="tab" id="tab2">
                    </div>
                </div>
            </div>

            <div class="clear"></div>
        </div><!--end of left content-->

        <div class="right_content">

            <div class="languages_box">
                <span class="red">语言:</span>
                <a href="#"><img src="images/gb.gif" alt="" title="" border="0" /></a>
                <a href="#"><img src="images/fr.gif" alt="" title="" border="0" /></a>
                <a href="#"><img src="images/de.gif" alt="" title="" border="0" /></a>
            </div>
            <div class="currency">
                <span class="red">货币: </span>
                <a href="#">GBP</a>
                <a href="#">EUR</a>
                <a href="#"><strong>USD</strong></a>
            </div>


            <div class="cart">
                <div class="title"><span class="title_icon"><img src="images/cart.gif" alt="" title="" /></span>我的购物车</div>
                <div class="home_cart_content">
                    3 件物品 | <span class="red">总计: 100￥</span>
                </div>
                <a href="/shopcar/getShopcarByUid.action" class="view_cart">查看购物车</a>

            </div>

            <div class="title"><span class="title_icon"><img src="images/bullet3.gif" alt="" title="" /></span>关于我们的商店</div>
            <div class="about">
                <p>
                    <img src="images/about.gif" alt="" title="" class="right" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;洛雷姆·伊普索姆·多尔坐在阿米特的座位上，他是一位非常优秀的运动员，他是一位非常出色的速度运动员，他在拉伯和多洛尔·马格纳·阿利夸尔的比赛中发挥了重要作用。但我是小维尼安人，诺查德人。洛雷姆·伊普索姆·多尔坐在阿米特的座位上，他是一位非常优秀的运动员，他是一位非常出色的速度运动员，他在拉伯和多洛尔·马格纳·阿利夸尔的比赛中发挥了重要作用。但我是小维尼安人，诺查德人。
                </p>

            </div>

            <div class="right_box">

                <div class="title"><span class="title_icon"><img src="images/bullet4.gif" alt="" title="" /></span>促销</div>
                <div class="new_prod_box">
                    <a href="details.jsp">产品名称</a>
                    <div class="new_prod_bg">
                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>
                        <a href="details.jsp"><img src="images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>
                    </div>
                </div>

                <div class="new_prod_box">
                    <a href="details.jsp">产品名称</a>
                    <div class="new_prod_bg">
                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>
                        <a href="details.jsp"><img src="images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>
                    </div>
                </div>

                <div class="new_prod_box">
                    <a href="details.jsp">产品名称</a>
                    <div class="new_prod_bg">
                        <span class="new_icon"><img src="images/promo_icon.gif" alt="" title="" /></span>
                        <a href="details.jsp"><img src="images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>
                    </div>
                </div>

            </div>

            <div class="right_box">

                <div class="title"><span class="title_icon"><img src="images/bullet5.gif" alt="" title="" /></span>分类</div>

                <ul class="list">
                    <li><a href="#">饰品</a></li>
                    <li><a href="#">书籍礼品</a></li>
                    <li><a href="#">特别推荐</a></li>
                    <li><a href="#">节日礼品</a></li>
                    <li><a href="#">饰品</a></li>
                    <li><a href="#">书籍礼品</a></li>
                    <li><a href="#">特别推荐</a></li>
                    <li><a href="#">节日礼品</a></li>
                    <li><a href="#">饰品</a></li>
                    <li><a href="#">书籍礼品</a></li>
                    <li><a href="#">特别推荐</a></li>
                </ul>

                <div class="title"><span class="title_icon"><img src="images/bullet6.gif" alt="" title="" /></span>伙伴</div>

                <ul class="list">
                    <li><a href="#">饰品</a></li>
                    <li><a href="#">书籍礼品</a></li>
                    <li><a href="#">特别推荐</a></li>
                    <li><a href="#">节日礼品</a></li>
                    <li><a href="#">饰品</a></li>
                    <li><a href="#">书籍礼品</a></li>
                    <li><a href="#">特别推荐</a></li>
                    <li><a href="#">节日礼品</a></li>
                </ul>

            </div>
        </div><!--end of right content-->

        <div class="clear"></div>
    </div><!--end of center content-->
    <div class="footer">
        <div class="left_footer"><img src="images/footer_logo.gif" alt="" title="" /><br /> <a href="http://www.cssmoban.com/" title="free templates">cssmoban</a></div>
        <div class="right_footer">
        </div>
    </div>
</div>


</body>
<script src="back/assets/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function pinglun(){
        console.log("点击了");
        $.getJSON("/discuss/getDiscussByBid.action","bid=" + ${books.id},function(res){
            console.log(res);
            <%-- 每次展示评论前先清空一下 --%>
            $("#tab2").html("");
            for(var i=0;i<res.length;i++){
                var newtr=$("<div></div>");
                <%--  newtr.append("<p>"+ res[i].uname + ":" + res[i].content + res[i].discusstime+ "</p>");--%>
                newtr.append(" <p class='more_details'><strong>"+ res[i].uname + "</strong>:&nbsp;" + res[i].content+"<span id='dis'>"+toTime(res[i].discusstime)+"</span></p>");
                $("#tab2").append(newtr);
            }
        });
    };
    // $(function(){
    //     console.log("进图页面");
    //
    // });
    var tabber1 = new Yetii({
        id: 'demo'
    });
    var shoppingNum = parseInt(document.getElementById("shoppingNum").value);
    //减少
    function reduceShopping() {
        if(shoppingNum == 1){
            shoppingNum = 1;
        }else{
            shoppingNum -= 1;
        }
        document.getElementById("shoppingNum").value = shoppingNum;
    };
    //增加
    function addShopping() {
        shoppingNum += 1;
        document.getElementById("shoppingNum").value = shoppingNum;
    };
    //添加到购物车
    function goShopping(id,price) {
        console.log(shoppingNum);
        var  data = 'bookid=' + id + "&price=" + price + "&num=" + shoppingNum;
        var  url = '/shopcar/addshopcar.action';
            $.get(url,data,function(res){
                alert("添加购物车成功!");
        })
        //   xhr = new XMLHttpRequest();
        // xhr.open('post', url);
        // //设置header
        // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // xhr.send(data);
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4 && ( xhr.state === 200 || xhr.state === 304 )){
        //         console.log(xhr.responseText);
        //         alert("添加购物车成功！");
        //     }
        // }
    }

    //立即购买
    function buyNow(id){
        console.log(shoppingNum);
        var  data = 'bookid=' + id+ "&num=" + shoppingNum;
        var  url = '/books/getByBookId.action';
        $.get(url,data,function(res){
            alert("进入确认下单页面!");
            location="checkOrder.jsp";
        })
    }

    //加入购物车 /shopcar/addshopcar.action
    // @param  图书id 图书价格，加入购物车的数量


    /** 转换时间格式 */
    function toTime(timestamp) {
        var date = new Date(timestamp);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
        s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
        return Y+M+D+h+m+s;
    }
</script>
</html>